@import '../../style/mixin.scss';

.home {
    background-color: #fff;

    .home-slider {
        margin-top: 66px;
        width     : 100%;
        overflow  : hidden;

        img {
            width: 100%;
        }

        .slide-item {
            position: relative;
            display : block !important;
        }

        .slider-tip {
            @include flex();
            position        : absolute;
            bottom          : 0;
            padding         : 0 10px;
            width           : 100%;
            height          : 50px;
            background-color: rgba(0, 0, 0, 0.5);
            color           : #fff;
            text-align      : center;

            span {
                @include line();
                width       : auto;
                min-width   : 22px;
                padding-left: 5px;
            }
        }

        .slick-dots {
            bottom       : 15px;
            text-align   : right;
            padding-right: 80px;

            li button:before,
            li.slick-active button:before {
                color: #fff;
            }
        }


    }

    .home-coin {
        padding-bottom: 90px
    }

    .home-coin-item {
        @include flex();
        height          : 260px;
        background-color: #fff;
        border          : 1px solid #E5E5E5;
        cursor          : pointer;

        div {
            @include flex()
        }

        span {
            @include font(2rem);
            padding-left: 20px;
        }

        img.coin-icon {
            width        : 68px;
            border-radius: 50%;
        }
    }

    .home-coin-itemActive {
        @include flex();
        flex-direction  : column;
        height          : 260px;
        background-color: $blue;

        div {
            @include flex()
        }

        span {
            @include font(2rem, #fff);
            padding-left: 20px;
        }

        img.coin-icon {
            width        : 68px;
            border-radius: 50%;
        }

        img.coin-ative {
            margin-top: 30px;
        }

    }

    .home-title {
        @include flex();
        position        : relative;
        padding         : 90px 0;
        background-color: #fff;

        .home-title-en {
            @include font(4.2rem, rgba(0, 0, 0, .05), center);
            position      : absolute;
            top           : 3rem;
            font-variant  : all-small-caps;
            font-weight   : lighter;
            letter-spacing: 2px;
        }

        .home-title-cn {
            @include font(2rem, #000, center);
            position: relative;

            &:after {
                content         : "";
                margin-left     : -150px;
                position        : absolute;
                bottom          : -4px;
                left            : 50%;
                height          : 3px;
                width           : 300px;
                background-color: $blue;
                border-bottom   : 2px solid $blue;
            }
        }
    }

    .home-platform {
        @include flex();
        background-color: #E5E5E5;
        padding         : 90px 0;

        h3 {
            @include font(36px, #000, center);
        }

        p {
            @include font(14px, #808080, center);
        }
    }

    .home-special-item {
        padding-top: 90px;

        h3 {
            @include font(24px, #000, center);
        }

        p {
            @include font(14px, #808080, center);
        }
    }
}

@media screen and (max-width:900px) {
    .home {

        .home-slider {

            .slick-dots {
                display: none !important;
            }
        }

        .home-title {
            padding: 30px 0;

            .home-title-en {
                font-size: 2rem;
                @include line();
            }

            .home-title-cn {
                font-size: 1.1rem;
                @include line();
            }
        }



        .home-coin-item {
            height: 150px;

            div {
                flex-direction: column;
            }

            span {
                padding  : 10px 0 0;
                font-size: 1rem;
            }

            img.coin-icon {
                width: 40px;
            }
        }

        .home-coin-itemActive {
            height: 150px;

            div {
                flex-direction: column;
            }

            span {
                padding  : 10px 0 0;
                font-size: 1.2rem;
            }

            img.coin-icon {
                width: 40px;
            }

            img.coin-ative {
                margin-top: 0;
                width     : 60px;
            }
        }
    }
}